<template>
	<view class="apply page bgf5 c33">
		
		<scroll-view scroll-y :scroll-into-view="scrollToView" class="list px15 boxS bgf5" @scroll="onScroll"
			style="height: calc(100vh -60rpx)">
			<view id="tab1" class="bgff r10 p15 fs13 shadow my15">
				<view class="flex flexC flexB borb pb16 pt9">
					<text class="fs15">姓名</text>
					<input v-model="name" placeholder="请输入您的姓名" />
				</view>
				<view class="flex flexC flexB py9">
					<text class="fs15">性别</text>
					<view class="bor r6 swichbox">
						<text @click="sex = 1" class="px15 py10 dinline" :class="sex == 1 ? 'active' : ''">男</text>
						<text @click="sex = 2" class="px15 py10 dinline" :class="sex == 2 ? 'active' : ''">女</text>
					</view>
				</view>
				<view class="flex flexC flexB borb pb16 pt9">
					<text class="fs15">价格</text>
					<input v-model="price" placeholder="请输入价格/小时" />
				</view>
				<view class="flex flexC flexB borb py14">
					<text class="fs15">出生日期</text>
					<picker :value="1990-01-01" mode="date" @change="birthChange">
						<view>
							<text>{{birth}}</text>
							<text class="arrowR dinline ml3"></text>
						</view>
					</picker>
				</view>

				<view class="flex flexC borb flexB py14" @click="chooseAddress">
					<text class="fs15 ">地址</text>

					<view class="flex1">
						<text>{{address}}</text>
						<text class="arrowR dinline ml3"></text>
					</view>

				</view>
				<view class="flex flexC flexB borb py14">
					<text class="fs15">手机号</text>
					<input placeholder="请输入您的手机号" v-model="mobile" />
				</view>

				<picker @change="bindPickerChange" :value="index" :range="typeList">

					<view class="flex flexC flexB borb py16">
						<text class="fs15">助教类型</text>
						<text>{{type}}</text>
					</view>
				</picker>
				<view class="flex flexC flexB pt9">
					<text class="fs15">等级</text>
					<view class="bor r6 swichbox">
						<text @click="level = 1" class="px15 py10 dinline borr"
							:class="level == 1 ? 'active' : ''">萌新</text>
						<text @click="level = 2" class="px15 py10 dinline borr"
							:class="level == 2 ? 'active' : ''">业余</text>
						<text @click="level = 3" class="px15 py10 dinline" :class="level == 3 ? 'active' : ''">专业</text>
					</view>
				</view>
			</view>
			<view id="tab2">
			
				<view class="bgff r10 px15 pt15 pb8 shadow mb15">
					<view class="fs16 mb16">可约时段(0/2)</view>
					<view class="r5 bgf5 p14 flex flexC mb10">
						<uni-icons v-if="true" type="circle" color="#DCDCDC" size="30"></uni-icons>
						<uni-icons v-else type="checkbox-filled" color="#FAD00D" size="30"></uni-icons>
						<view class="flex1 aliC pr30" @click="clickWeek">
							<view class="">
								<view class="fs11 c99 mb4">周末</view>
								<view class="fs16">
									<text>{{weekTime1}}-{{weekTime2}} </text>

									<text class="arrowR dinline ml3"></text>
								</view>
							</view>
						</view>
					</view>
					<view class="r5 bgf5 p14 flex flexC mb10">
						<uni-icons v-if="true" type="circle" color="#DCDCDC" size="30"></uni-icons>
						<uni-icons v-else type="checkbox-filled" color="#FAD00D" size="30"></uni-icons>
						<view class="flex1 aliC pr30" @click="clickDay">
							<view class="">
								<view class="fs11 c99 mb4">工作日</view>
								<view class="fs16">
									<text>{{dayTime1}}-{{dayTime2}} </text>
									<text class="arrowR dinline ml3"></text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view id="tab3" class="bgff r10 p15 fs13 shadow mb15">
				<view class="fs16">头像</view>
				<view class="fs11 c99 mt8">注：图片内容不得含有敏感信息、二维码和联系方式</view>
				<view class="mt18 flex flexC flexW">
				
					<view v-if="logo != ''"  class="bor boxS mr14 mb12 r8 addImg flex flexC flexJC">
						<image class="cover r8" :src="logo" mode="aspectFill"></image>
						<view class="del" @click="delLogo">
							<uni-icons type="clear" color="#999" size="28"></uni-icons>
						</view>
					</view>
					
					<view class="bor boxS mr14 mb12 r8 addImg flex flexC flexJC" @click="uploadLogo">
						<uni-icons type="plusempty" color="#332C2A" size="16"></uni-icons>
					</view>
				</view>
			</view>
			<view id="tab3" class="bgff r10 p15 fs13 shadow mb15">
				<view class="fs16">生活照(0/20)</view>
				<view class="fs11 c99 mt8">注：图片内容不得含有敏感信息、二维码和联系方式，请上传至少6张健康生活照</view>
				<view class="mt18 flex flexC flexW">
				
					<view v-for="(item,index) in covers" :key="index" class="bor boxS mr14 mb12 r8 addImg flex flexC flexJC">
						<image class="cover r8" :src="item" mode="aspectFill"></image>
						<view class="del" @click="delCover(index)">
							<uni-icons type="clear" color="#999" size="28"></uni-icons>
						</view>
					</view>
					
					<view class="bor boxS mr14 mb12 r8 addImg flex flexC flexJC" @click="uploadCover">
						<uni-icons type="plusempty" color="#332C2A" size="16"></uni-icons>
					</view>
				</view>
			</view>
			<view id="tab4" class="bgff r10 p15 fs13 shadow mb15">
				<view class="fs16 borb pb16">个人特点</view>
				<textarea v-model="intro" class="txtbox px7 py16 c33" maxlength="100" placeholder-class="c99"
					placeholder="请填写个人特点，至少30个字，让更多人了解您 ~"></textarea>
				<view class="px7 py10 borb fs10 c99 aliR">
					<text class="cf6c">0</text>
					<text>/100</text>
				</view>
				<view class="fs14 py12">打标签：(最多选8个)</view>
				<view class="tags flex flexC flexW fs11">
					<text v-for="(item,index) in tagList" @click="clickTag(item)" :key="index" class="bgf5 r3 mr9 mb7 px10 py5"
						:class="item.check == true ? 'active' : ''">{{item.value}}</text>
				</view>
			</view>
		
		</scroll-view>
		
		<button @click="add" class="btn2 flex1 r40 fs16 c33 py4" hover-class="none">提交申请</button>
		


		<!-- 修改昵称、手机号弹框 -->
		<uni-popup type="center" ref="userinfoPopup">
			<view class="userinfoPopup bgff px20 pt20 pb25 r12">
				<view class="aliR mb26">
					<uni-icons @click="$refs.userinfoPopup.close()" type="closeempty" color="#8B8C8E"
						size="26"></uni-icons>
				</view>
				<view class="flex flexC bgf5 r5 px16 py13 mb14">
					<text class="pr30">昵称</text>
					<input class="flex1 fs14 c99" placeholder-class="c99" type="text" placeholder="请输入昵称">
				</view>
				<view class="flex flexC bgf5 r5 px16 py7 mb14">
					<text class="pr16">手机号</text>
					<button class="flex1 fs14 c99 aliL" open-type="getPhoneNumber" hover-class="none">点击授权手机号</button>
				</view>
				<button class="btn r40 fs15 c33 mx20" hover-class="none">确认</button>
			</view>
		</uni-popup>
		<!-- 规则弹框 -->
		<uni-popup type="center" ref="rulePopup">
			<view class="rulePopup bgff fs12 px20 pt20 pb25 r12 mx30">
				<view class="aliC mb14 fs16"> 助教规则说明 </view>
				<view class="py2"> 1.助教费用将在审核通过后确定; </view>
				<view class="py2">2.按小时收费，并且完成赴约后，全部费用自动进 入助教账户； </view>
				<view class="py2">3.用户赴约时，请让用户出示赴约码，扫码确认双方已赴约;</view>
				<view class="py2">4.助教随时可取消预约，取消预约后，自动退还用户预约费用;</view>
				<view class="py2">5.申请助教请上传真实的信息和照片，有助于被用户查看了解，可提升预约概率;</view>
				<button @click="$refs.rulePopup.close()" class="btn r40 fs15 c33 mx20 mt20 py3"
					hover-class="none">知道了</button>
			</view>
		</uni-popup>
		<!-- 门店选择弹框 -->
		<uni-popup type="bottom" ref="shopPopup">
			<view class="shopPopup bgff fs15 pt20">
				<view class="flex flexC flexB mb14 mx15">
					<text>选择门店</text>
					<uni-icons @click="$refs.shopPopup.close()" type="closeempty" color="#8B8C8E" size="20"></uni-icons>
				</view>
				<view class="flex flexC flexB mb14 mx15">
					<text>城市</text>
					<view class="flex flexC fs13 c66">
						<text class="mr5">长沙市</text>
						<uni-icons type="arrowdown" color="#666" size="14"></uni-icons>
					</view>
				</view>
				<view class="mb14 mx15">
					<text>门店</text>
				</view>
				<scroll-view scroll-y style="max-height: 60vh;">
					<radio-group @change="radioChange" class="fs14 px15">
						<label v-for="(item,index) in 15" :key="index">
							<view class="flex flexC pb14">
								<radio :value="item" color="#FAD00D" style="transform: scale(.85);" />
								<text class="flex1">长沙-雀侠总店</text>
								<text class="c99 fs13">-m</text>
							</view>
						</label>
					</radio-group>
				</scroll-view>
				<view class="fs11 flex flexC shadow pb25 px18 pt12">
					<text>已选：</text>
					<text class="c99 flex1">0家店</text>
					<button @click="$refs.shopPopup.close()" class="btn px28 r40 fs16 c33 py1"
						hover-class="none">选好了</button>
				</view>
			</view>
		</uni-popup>
	

		<tpf-time-range ref="time" :startTime="weekTime1" :startDefaultTime="weekTime1" :endTime="weekTime2"
			:endDefaultTime="weekTime2" @timeRange="startRange">
		</tpf-time-range>
		
		<tpf-time-range ref="time2" :startTime="dayTime1" :startDefaultTime="dayTime1" :endTime="dayTime2"
			:endDefaultTime="dayTime2" @timeRange="startRange2">
		</tpf-time-range>

	</view>
</template>

<script>
	import {
		ossUpload
	} from '@/js_sdk/jason-alioss-upload/oss.js'
	export default {
		data() {
			return {
				timeList: {
					statr: '',
					end: ''
				},
				tabs: [{
						name: '基础信息',
						id: 'tab1',
						top: 0
					},
					{
						name: '时间设置',
						id: 'tab2',
						top: 0
					},
					{
						name: '生活照',
						id: 'tab3',
						top: 0
					},
					{
						name: '个人特点',
						id: 'tab4',
						top: 0
					}
				],
				selIndex: 0,
				sex: 2,
				level: 1,
				scrollToView: 'tab1',
				timer: null,
				typeList: [],
				tagList: [],
				name: '',
				mobile: '',
				address: '请选择地址',
				cityStr: '',
				lat: '',
				lng: '',
				birth: '请选择出生日期',
				type: '请选择类型',
				startTime: "00:00",
				startDefaultTime: "06:00",
				endTime: "24:00",
				endDefaultTime: "06:00",
				weekTime1:"08:00",
				weekTime2:"23:00",
				dayTime1:"08:00",
				dayTime2:"23:00",
				intro:'',
				logo:'',
				covers:[],
				isChecked:true,
				price:'',
				city:this.city
			};
		},
		onLoad() {
			this.getInit();
		},
		onShow() {
		
		},
		methods: {
			
			detail(){
				
				let param = {};
				let that = this;
				this.$api.assistantDetail(param).then(res => {
				
					if (res.code == 1) {
						that.name = res.data.name;
						if(res.data.sex == 'girl'){
							that.sex = 2;
						}else{
							that.sex = 1;
						}
						that.price = res.data.price;
						that.birth = res.data.birth;
						that.address = res.data.address;
						that.city = res.data.city;
						that.lat = res.data.lat;
						that.lng = res.data.lng;
						that.mobile = res.data.mobile;
						that.type = res.data.type;
						if(res.data.level =='专业'){
							that.level = 3;
						}else if(res.data.level == '业余'){
							that.level = 2;
						}else{
							that.level = 1;
						}
						that.weekTime1 = res.data.time.split("-")[0];
						that.weekTime2 = res.data.time.split("-")[1];
						
						that.dayTime1 = res.data.time2.split("-")[0];
						that.dayTime2 = res.data.time2.split("-")[1];
						that.logo = res.data.logo;
						that.covers = res.data.image;
						that.intro = res.data.intro;
						
						for(var i=0;i<that.tagList.length;i++){
							
							for(var j=0;j<res.data.tag.length;j++){
								if(res.data.tag[j] == that.tagList[i].value){
									that.tagList[i].check = true;
								}
							}
						}
						
					} else {
						uni.showToast({
							msg:res.msg,
							icon:'none'
						})
					}
				})
			},
			
			add(){
				
				if(this.name == ''){
					
					uni.showToast({
						title:'请输入您的姓名',
						icon:'none'
					})
					return;
				}
				
				if(this.birth == '请选择出生日期')
				{
					uni.showToast({
						title:'请选择出生日期',
						icon:'none'
					})
					return;
				}
				if(this.mobile == ''){
					uni.showToast({
						title:'请填写电话',
						icon:'none'
					})
					return;
				}
				if(this.type == '请选择类型')
				{
					uni.showToast({
						title:'请选择类型',
						icon:'none'
					})
					return;
				}
				if(this.lat == ''){
					
					uni.showToast({
						title:'请填选择地址',
						icon:'none'
					})
					return;
				}
				if(this.logo == ''){
					uni.showToast({
						title:'请上传头像',
						icon:'none'
					})
					return;
				}
				if(this.covers.length == 0){
					uni.showToast({
						title:'请上传生活照',
						icon:'none'
					})
					return;
				}
				if(this.intro == ''){
					uni.showToast({
						title:'请输入自我简介',
						icon:'none'
					})
					return;
				}
				
				if(this.isChecked == true){
					uni.showToast({
						title:'请同意入驻协议',
						icon:'none'
					})
					return;
				}
				if(this.price == ''){
					uni.showToast({
						title:'请输入价格',
						icon:'none'
					})
					return;
				}
				var tags = new Array();
				for(var i=0;i<this.tagList.length;i++){
					if(this.tagList[i].check == true){
						tags.push(this.tagList[i].value);
					}
				}
				if(tags.length == 0){
					uni.showToast({
						title:'请选择标签',
						icon:'none'
					})
					return;
				}
				
				let that = this;
				let param = {
					
					name:this.name,
					mobile:this.mobile,
					sex:this.sex,
					birth:this.birth,
					address:this.address,
					lat:this.lat,
					lng:this.lng,
					type:this.type,
					level:this.level,
					time1:this.weekTime1+"-"+this.weekTime2,
					time2:this.dayTime1+"-"+this.dayTime2,
					intro:this.intro,
					logo:this.logo,
					cover:JSON.stringify(this.covers),
					tag:JSON.stringify(tags),
					price:this.price,
					city:this.city
					
				};
				
				this.$api.addAssistant(param).then(res => {
				
					if (res.code == 1) {
						
						uni.showModal({
							title:"提示",
							content:"提交成功，请耐心等待审核,关注公众号会有审核提示",
							showCancel:false,
							confirmText:"关注",
							complete(res) {
								
								uni.navigateBack({delta:1})
								
							}
						})
					} else {
						uni.showToast({
							msg:res.msg,
							icon:'none'
						})
					}
				})
				
				
				
				
			},
			
			clickTag(item){
				item.check = ! item.check;
			},
			
			clickCheck(){
				this.isChecked = !this.isChecked;
			},
			
			delLogo(){
				this.logo = "";
			},
			
			delCover(index){
				var list = new Array();
				for(var i=0;i<this.covers.length;i++){
					if(index != i){
						list.push(this.covers[i]);
					}
				}
				this.covers = list;
			},
			
			uploadCover(){
				
				let that = this;
				uni.chooseImage({
					count: 9, //默认9
					fail(res) {
						console.info(res);
					},
					success: async (file) => {
						
						for(var i=0;i<file.tempFilePaths.length;i++){
							const {
								success,
								data
							} = await ossUpload(file.tempFilePaths[i], file.tempFiles[i].path, 'img/')
							if (success) {
								console.info(data);
								that.covers.push(data);
									
							} else {
								uni.showToast({
									icon: 'none',
									title: data
								})
							}
						}
						
					
					}
				});
			},
			
			
			
			uploadLogo(){
				
				let that = this;
				uni.chooseImage({
					count: 1, //默认9
					fail(res) {
						console.info(res);
					},
					success: async (file) => {
						const {
							success,
							data
						} = await ossUpload(file.tempFilePaths[0], file.tempFiles[0].path, 'img/')
						if (success) {
							console.info(data);
							that.logo = data;
								
						} else {
							uni.showToast({
								icon: 'none',
								title: data
							})
						}
					}
				});
			},

			clickWeek() {

				this.$refs['time'].open();

			},
			
			clickDay() {
			
				this.$refs['time2'].open();
			
			},
			startRange2(e){
				this.dayTime1 = e[0];
				this.dayTime2 = e[1];
			},
			startRange(e) {
				
				this.weekTime1 = e[0];
				this.weekTime2 = e[1];
				console.log(e);
			},

			chooseAddress() {
				let that = this;
				uni.chooseLocation({
					success: function(res) {
						console.info(res)
						that.lat = res.latitude;
						that.lng = res.longitude;

						let regex =
							"(?<province>[^省]+省|.+自治区)(?<city>[^自治州]+自治州|[^市]+市|[^盟]+盟|[^地区]+地区|.+区划)(?<county>[^市]+市|[^县]+县|[^旗]+旗|.+区)?(?<town>[^区]+区|.+镇)?(?<village>.*)"
						let newAddress = res.address.match(regex);
						let group = newAddress.groups;


						that.province = group.province;
						that.city = group.city;
						if (group.county != null) {
							that.area = group.county;
						}
						if (group.town != null) {
							that.area = group.county;
						}
						that.address = res.name;
						that.cityStr = that.province + " " + that.city + " " + that.area
						console.log('位置名称：' + res.name);
						console.log('详细地址：' + res.address);
						console.log('纬度：' + res.latitude);
						console.log('经度：' + res.longitude);
					}
				})
			},

			getTime(val) {
				this.timeList = val;
			},
			radioChange(ev) {

			},
			birthChange(e) {
				this.birth = e.detail.value;
			},
			bindPickerChange(e) {
				this.type = this.typeList[e.detail.value];
			},

			getInit() {
				let that = this;
				let param = {

				};

				this.$api.initList(param).then(res => {
				
					console.info(JSON.stringify(res));
					if (res.code == 1) {
						that.tagList = res.data.tag;
						that.typeList = res.data.type;
						that.detail();
					} else {
				
					}
				})

			},

			getDivInfo() {
				// 创建选择器对象
				const query = uni.createSelectorQuery().in(this);
				// 选择当前窗口的div
				this.tabs.forEach((item, index) => {
					query.select(`#${item.id}`).boundingClientRect(data => {
						if (data) {
							// data包含了div的位置信息
							item.top = data.top;
						}
					}).exec();
				})
			},
			onChangeTab(item, index) {
				this.selIndex = index;
				this.scrollToView = item.id;
			},
			// 滚动时切换tab选中状态
			onScroll(ev) {
				if (this.timer) {
					clearTimeout(this.timer);
				}
				this.timer = setTimeout(() => {
					let scrollTop = ev.detail.scrollTop;
					let index = this.tabs.findIndex(item => {
						return (item.top >= scrollTop)
					});
					if (this.selIndex == index && index < 0) return;
					this.selIndex = index < 0 ? this.selIndex : index;
				}, 200)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.apply {
		.time {
			color: #F95C28;
		}

		.btn {
			background-color: #FAD00D;
		}
		
		.btn2{
			background-color: #FAD00D;
			line-height: 60rpx;
			position: relative;
			bottom: 0;
			margin-left: 10rpx;
			margin-right: 10rpx;
			width: 95%;
			margin-top: 30rpx;
		}

		.btnbox {
			.icon {
				width: 40rpx;
				height: 40rpx;
			}
		}

		.nav {
			color: #1989FA;
		}

		#tab4 {
			.tags {
				>text {
					border: 2rpx solid #f5f5f5;
				}

				.active {
					border: 2rpx solid #F95C28;
					color: #F95C28;
					background-color: #fff;
					box-sizing: border-box;
				}
			}
		}

		#tab3 {
			.addImg {
				width: 182rpx;
				height: 182rpx;
				position: relative;

				.cover {
					width: 100%;
					height: 100%;
				}

				.del {
					position: absolute;
					top: -26rpx;
					right: -26rpx;
				}
			}
		}

		#tab1 {
			.swichbox {
				overflow: hidden;

				>text {
					&.active {
						background-color: #FAD00D;
					}
				}
			}
		}

		.tabbox {
			.item {
				position: relative;

				.active {
					color: #333;
					font-weight: 600;
				}

				.icon {
					width: 38rpx;
					height: 10rpx;
					position: absolute;
					bottom: 0;
					left: calc(50% - 19rpx);
				}
			}
		}
	}
</style>